<template>
  <ul class="footer">
    <li @click="toIndex">
      <i class="fa fa-home"></i>
      <p>首页</p>
    </li>
    <li @click="toOrderList">
      <i class="fa fa-file-text-o"></i>
      <p>订单</p>
    </li>
    <li @click="toMy">
      <i class="fa fa-user-o"></i>
      <p>我的</p>
    </li>
  </ul>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const { proxy } = getCurrentInstance()
const router = useRouter()

const currentPath = ref('/')

const toIndex = () => {
  router.push('/')
}

const checkLoginStatus = () => {
  const token = sessionStorage.getItem('token')
  const user = proxy.$getSessionStorage('user')
  
  if (!token || !user) {
    console.log('未登录或登录已过期')
    sessionStorage.removeItem('token')
    proxy.$removeSessionStorage('user')
    ElMessage.warning('请先登录')
    router.push('/login')
    return false
  }
  
  if (!token.startsWith('Bearer ')) {
    console.log('Token格式错误')
    sessionStorage.removeItem('token')
    proxy.$removeSessionStorage('user')
    ElMessage.warning('登录已过期，请重新登录')
    router.push('/login')
    return false
  }
  
  return true
}

const toOrderList = () => {
  if (checkLoginStatus()) {
    currentPath.value = '/orderList'
    router.push('/orderList')
  }
}

const toMy = () => {
  if (checkLoginStatus()) {
    currentPath.value = '/profile'
    router.push('/profile')
  }
}
</script>

<style scoped>
.footer {
  width: 100%;
  height: 14vw;
  border-top: solid 1px #DDD;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.footer li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  user-select: none;
  cursor: pointer;
}

.footer li p {
  font-size: 2.8vw;
}

.footer li i {
  font-size: 5vw;
}
</style>